<template>
	<view class="wo-page" v-if="appInit && pageInit">
		<u-tabs :list="tabList" :is-scroll="false" :current="tabIndex" @change="tabChangeFunc"></u-tabs>
		<view class="wo-page-body">
		    <view class="wo-list u-padding-10" v-if="dataList.total">
		        <view class="wo-item u-padding-10" v-for="(data_v, data_k) in dataList.items" :key="data_k">
		            <view class="wo-data u-padding-20">
		                <view class="wo-data-info">
		                    <view class="wo-data-name">
		                        <text>{{ data_v.name }}</text>
		                    </view>
		                    <view class="wo-data-count">
		                        <text>库存：{{ data_v.stock||0 }}</text>
								<u-line class="u-line u-margin-left-20 u-margin-right-20" direction="col" length="30"></u-line>
								<text>剩余：{{ data_v.stock - data_v.sales||0 }}</text>
		                    </view>
		                </view>
		                <view class="wo-data-action">
							<!--
		                    <u-button type="primary" size="mini" shape="circle" @click="$u.route('pages/product/detail', {id: data_v.id})">查看详情</u-button>
							-->
							<u-button class="u-margin-left-20" type="warning" size="mini" shape="circle" @click="$u.route('pages/product_order/form', {product_id: data_v.id})">预约</u-button>
		                </view>
		            </view>
		        </view>
		        <u-loadmore :status="dataListStatus" @loadmore="dataListMoreFunc"></u-loadmore>
		    </view>
		    <u-empty v-else text="暂无数据" mode="list"></u-empty>
		</view>
		<view class="u-flex wo-page-foot u-padding-20">
		    <view class="u-flex-6 u-padding-right-10"><u-button type="primary" shape="circle" @click="$u.route('pages/index')">返回首页</u-button></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabList: [{
					name: '疫苗预约'
				}, {
					name: '我的预约'
				}],
				tabIndex: 0,
				// 列表
				dataList: {},
				// 列表状态
				dataListStatus: 'loadmore'
			};
		},
		methods: {
		        // 页面初始化
		        async initPageFunc(option) {
		            // 数据列表
		            let dataList = await this.dataListFunc();
		            if (dataList) {
		                this.dataList = dataList;
		            }
		            this.pageInit = true;
		        },
		        async dataListFunc(params) {
		            params = params || {};
		            this.dataListStatus = 'loading';
		            let dataList = await this.$u.api.productList(params);
		            if (!dataList) {
		                return false;
		            }
		            this.dataListStatus = 'loadmore';
		            return dataList;
		        },
		        async dataListMoreFunc() {
		            if (this.dataList.items.length >= this.dataList.total) {
		                this.dataListStatus = 'nomore';
		                return false;
		            }
		            let result = await this.dataListFunc({
		                page: ++this.dataList.page_current
		            });
		            if (result) {
		                this.dataList.items = this.dataList.items.concat(result.items);
		            }
		        },
		        async tabChangeFunc(index) {
		        	this.tabIndex = index;
		            if (index == 1) {
		                this.$u.route('pages/product_order/index');
		            }
		        }
		    }
		
	}
</script>

<style lang="scss">
.wo-page-body {
    padding-bottom: uni-unit(70px);
}
.wo-page-foot {
    position: fixed;
    z-index: 99;
    bottom: 0;
    width: 100%;
}
.wo-data {
    display: flex;
    background-color: #fff;
    border-radius: uni-unit(5px);
    .wo-data-info {
        flex: 1;
        line-height: uni-unit(20px);
        font-size: uni-unit(12px);
        color: $uni-text-color-grey;
        .wo-data-name {
            height: uni-unit(30px);
            line-height: uni-unit(30px);
            font-size: uni-unit(16px);
            color: $uni-text-color;
        }
    }
    .wo-data-count {
		display: flex;
		align-items: center;
		height: uni-unit(20px);
		line-height: uni-unit(20px);
	}
	.wo-data-action {
        display: flex;
        align-items: center;
    }
}
</style>
